<template>
    <div>
        <h2>自定义指令</h2>
        <div class="nav_bar" v-nav-current="{
            curId,
            className: 'nav-item',
            activeClass: 'nav-current'
        }">
            <div v-for="(item, index) of items"
                 :key="index"
                 class="nav-item"
                 @click="changeNav(index)">
                {{ item }}
            </div>
        </div>
    </div>
</template>

<script>
    import navCurrent from "../directives/navCurrent"
    export default {

        directives:{
            navCurrent
        },
        data() {
            return {
                curId: 0,
                items: [
                    "选项1",
                    "选项2",
                    "选项3",
                    "选项4",
                ]
            };
        },

        methods: {
            changeNav(index){
                this.curId = index
            }
        }
    };
</script>

<style scoped>
    .nav_bar{
        width:500px;
        height:50px;
        margin: 50px auto;
        border: 1px solid #000;
    }
    .nav-item{
        float: left;
        width: 25%;
        height: 50px;
        line-height: 50px;
        text-align: center;
    }
    .nav-current{
        background-color: #000;
        color: #fff;
    }
</style>
